<template>
  <view class="container">
    <!-- <view class="seach">
      <uni-easyinput v-model="nameValue" @iconClick="iconClick" suffixIcon="search" placeholder="请输入名字"></uni-easyinput>
    </view> -->
    <view class="user">
      <view v-for="(item, index) in userlist" :key="index" class="userbox">
        <view class="user_left">
          <view class="user_left_box">
            <view class="user_ava">
              <image :src="'/static/images/index/img_safe'+ (index+1) + '.png'" alt="">
            </view>
            <view class="user_detail">
              <view class="user_name">
                <view>{{ item.name }}</view>
                <view>{{ item.position }}</view>
              </view>
              <view class="user_info">
                <view>{{ item.personType }}</view>
                <view>{{ item.unit }}</view>
              </view>
              <view class="user_info">
                <view>{{ item.phone }}</view>
              </view>
            </view>
          </view>
        </view>
        <view class="user_right">
          <image @click="callPhone(item.phone)" src="../static/ico_phone.png" mode="" />
        </view>
      </view>
    </view>
  </view>
</template>

<script>
  export default {
    data() {
      return {
        nameValue: '',
        userlist: [],
      }
    },
    onLoad(options) {
      this.getList()
    },
    methods: {
      getList() {
        this.$request.getperson().then(res => {
          this.userlist = res.rows || []
        })
      },
      // 搜索
      iconClick() {},
      // 拨打电话
      callPhone(e) {
        if(e) {
          uni.makePhoneCall({
            phoneNumber: e
          });
        } else {
          uni.showToast({
            title: '未填写相关信息',
            icon: 'none',
            duration: 2000
          });
        }
      },
    },
  }
</script>

<style lang="scss" scoped>
  .seach {
    padding: 25rpx 25rpx 0;
  }

  .user {
    // padding: 25rpx 0 0;

    .userbox {
      display: flex;
      align-items: center;      
      justify-content: space-between;
      background-color: #fff;
      border-bottom: 1px solid #e9e7e7;
      padding: 20rpx 25rpx;

      .user_left {

        .user_left_box {
          display: flex;
          align-items: center;

          .user_ava {
            width: 70rpx;
            height: 70rpx;
            margin-right: 25rpx;

            image {
              width: 100%;
              height: 100%;
            }
          }

          .user_detail {
            .user_name {
              display: flex;
              align-items: center;
              font-size: 32rpx;
              line-height: 32rpx;

              view:nth-child(2) {
                font-size: 24rpx;
                line-height: 24rpx;
                padding-left: 25rpx;
              }
            }

            .user_info {
              display: flex;
              align-items: center;
              font-size: 26rpx;
              line-height: 26rpx;
              // padding-top: 25rpx;
              padding-top: 10rpx;

              view:nth-child(2) {
                padding-left: 20rpx;
              }
            }
          }
        }
      }

      .user_right {

        image {
          width: 60rpx;
          height: 60rpx;
        }
      }
    }
  }
</style>
